<template>
    <div class="businessOpportunityAppointment">
        <div class="container">
            <div class="headerBox">
                <van-nav-bar title="产品详情">
                    <template #left>
                        <div class="headerLeftBtn">
                            <van-icon @click="$router.push('/home')" size=".48rem" color="#000000" name="arrow-left" />
                            <van-icon @click="$router.push('/home')" size=".48rem" color="#000000" name="cross" style="margin-left: .15rem;" />  
                        </div>
                    </template>
                </van-nav-bar>
            </div>
            <div class="bannerBox">
                <div class="imgBox">
                    <img src="@/assets/images/img2.png" alt="">
                </div>
            </div>
            <div class="buttons">
                <van-button round block type="info">立即预约</van-button>
                <van-button round block type="default">收藏</van-button>
            </div>
            <div class="content">
                <img src="@/assets/images/img4.png" alt="">
            </div>
        </div>
        <div class="footer" @click="intentionOrder">意向下单</div>
    </div>
</template>
<script>
export default {
    name: 'businessOpportunityAppointment',
    data() {
        return {}
    },
    methods: {
        intentionOrder() {
            this.$router.push('/appointmentDetail')
        }
    }
}
</script>
<style lang="less" scoped>
.businessOpportunityAppointment {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .container {
        flex: 1;
        overflow: auto;
        .bannerBox {
            height: 4.83rem;
            position: relative;
            .imgBox {
                img {
                    width: 100%;
                    display: block;
                }
            }
        }
        .content {
            width: 100%;
            img {
                width: 100%;
            }
        }
        .buttons {
            margin-top: .3rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 .2rem;
            button {
                width: 3.14rem;
                height: .8rem;
                border-radius: 0.2rem;
                font-size: 0.32rem;
                &:last-child {
                    background: #E9F4FF;
                    color: #2892FF;
                    border: 0 !important;
                }
            }
        }
    }
}
.footer {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background: #2892FF;
    font-weight: normal;
    font-size: 0.34rem;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
}
</style>